

<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?"
                @keydown.enter="addTodo" />
        </header>
        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" :checked="isAllDone"
                @change="changeAllChecked(!isAllDone)" />
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <li class="todo" :class="{ completed: item.done }" v-for="(item, index) in filterTodoList">
                    <div @dblclick="changeIsEdit(item)" v-show="!item.isEdit">
                        <input class="toggle" type="checkbox" :checked="item.done"
                            @change="changeTodoStatus(index, $event)" />
                        <label>{{ item.text }}</label>
                        <button class="destroy" @click="delTodo(index)"></button>
                    </div>
                    <input class="edit" type="text" :value="item.text" v-show="item.isEdit"
                        @keyup.enter="endEdit(item, $event.target.value)" @blur="endEdit(item, $event.target.value)" />
                </li>
            </ul>
        </section>
        <footer class="footer">
            <span class="todo-count"> <strong></strong> {{ unDoneNumber }} item left </span>
            <ul class="filters">
                <li><a href="" :class="{ selected: visibility === 'all' }" @click.prevent="changeVisibility('all')">All</a>
                </li>
                <li><a href="" :class="{ selected: visibility === 'active' }"
                        @click.prevent="changeVisibility('active')">Active</a>
                </li>
                <li>
                    <!-- :class="{ selected: visibility == 'Completed'} -->
                    <a href="" :class="{ selected: visibility === 'completed' }"
                        @click.prevent="changeVisibility('completed')">Completed</a>
                </li>
            </ul>
            <button class="clear-completed" v-show="todolist.length > unDoneNumber" @click="delAllDone">
                Clear completed
            </button>
        </footer>

    </section>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue"
import useLocalStoage from "./hooks/useLocalStoage"
// ------------------------- 定义状态
// let todolist = reactive([
//     {
//         id: "01",
//         text: "学习vue3",
//         done: true,
//         isEdit: false
//     },
//     {
//         id: "02",
//         text: "学习react",
//         done: false,
//         isEdit: false
//     },
// ]);
let todolistData = useLocalStoage("todolist").value || []
let todolist = reactive(todolistData);
let visibility = ref("all");

// 判断是否全部已完成
let isAllDone = computed(() => {
    return todolist.every(item => item.done == true);
})
// 统计没有完成的数量
let unDoneNumber = computed(() => {
    return todolist.filter(item => item.done == false).length;
})
// 根据visibility计算可以显示哪些todo
let filterTodoList = computed(() => {
    if (visibility.value === 'all') {
        return todolist;
    } else if (visibility.value === 'active') {
        return todolist.filter(item => item.done == false)
    } else {
        return todolist.filter(item => item.done == true)
    }
})

// ---------------------------- 定义方法
// 删除todo
let delTodo = (index) => {
    todolist.splice(index, 1)
}
// 改变单个todo的状态
let changeTodoStatus = (idx, e) => {
    todolist[idx].done = e.target.checked;
}
// 全选与反选
let changeAllChecked = (flag) => {
    todolist.forEach(item => {
        item.done = flag;
    })
}
// 双击编辑
let changeIsEdit = (item) => {
    item.isEdit = true;
}
// 结束编辑
let endEdit = (item, newText) => {
    item.isEdit = false;
    item.text = newText.trim();
}
// 添加todo
let addTodo = (e) => {
    let newText = e.target.value;
    if (!newText.trim()) {
        alert("添加的tood不能为空~")
        return;
    }
    todolist.push({
        id: Date.now(),
        text: newText,
        done: false,
        isEdit: false
    })
    e.target.value = ""
}
// 改变visibility
let changeVisibility = (vsb) => {
    visibility.value = vsb;
}
// 删除所有已完成
let delAllDone = () => {
    let res = todolist.filter(item => item.done == false);

    // res是一个数组  是一个普通的变量

    // todolist是一个reactive  res就是一个普通的变量
    // 这样直接赋值，后面todolist就没有响应式了
    // todolist = res;   // 这样写不OK，不OK，不OK

    // todolist.length = 0;
    // res.forEach(item => {
    //     todolist.push(item); // 这样写，todolist还是一个reactive
    // })

    todolist.length = 0;
    todolist.push(...res)
}
// ---------------------------- 监听器
watch(todolist, (newTodolist) => {
    useLocalStoage("todolist", newTodolist)
});
</script>

